<template>
  <div class="body">
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="订单编号：">
          <el-input v-model="orderNoinput" placeholder="请输入订单编号" />
        </el-form-item>
        <el-form-item label="选择日期：">
          <el-date-picker
            v-model="dataValue"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            class="el-icon-search searchBtn"
            @click="searchList"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- Table部分 -->
    <div class="tablePart">
      <el-table
        :data="orderList"
        style="width: 100%"
        :header-cell-style="{
          backgroundColor: 'rgb(243, 246, 251)',
          fontWeight: 500,
          padding: '6px 0'
        }"
      >
        <el-table-column
          prop="ownerId"
          label="序号"
          width="60px"
          type="index"
        />

        <el-table-column
          prop="orderNo"
          label="订单编号"
          width="230px"
        />
        <el-table-column
          prop="skuName"
          label="商品名称"
        />
        <el-table-column
          prop="price"
          label="订单金额（元）"
        >
          <template #default="{row}">{{ row.price/100 }}</template>
        </el-table-column>

        <el-table-column
          prop="innerCode"
          label="设备编号"
        />
        <el-table-column
          prop="status"
          label="订单状态"
        >
          <template #default="{row}">
            <span v-if="row.status===0">创建</span>
            <span v-else-if="row.status===1">支付完成</span>
            <span v-else-if="row.status===2">出货成功</span>
            <span v-else>出货失败</span>
          </template>

        </el-table-column>

        <el-table-column
          prop="createTime"
          label="订单日期"
          :formatter="formatDate"
        />
        <el-table-column
          label="操作"
        >
          <template #default="{row}">
            <el-button type="text" @click="checkDeatil(row)">查看详情</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!-- Table部分 -->

    <!-- 分页部分内容 -->
    <div class="pageSize">
      <span class="el-pagination__total">  共{{ pageParams.totalCount }}条数据  <span>第{{ pageParams.pageIndex }}/{{ pageParams.totalPage }}页</span></span>
      <div class="right">
        <el-pagination
          layout="prev, next"
          background
          :total="Number(pageParams.totalCount)"
          prev-text="上一页"
          next-text="下一页"
          hide-on-single-page
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 分页部分内容 -->
    <!-- 查看详情部分 -->
    <el-dialog
      title="订单详情"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <div class="order-status">
        <i class="el-icon-success" style="color:#93df99" />
        <img class="icon">
        <span class="status">出货成功</span>
        <img src="@/assets/pic_2.3b5af41c.png" class="pic">
      </div>

      <div class="content" />
      <!-- 查看详情内容部分 -->
      <el-form>
        <!-- 第一行 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单编号：">
              <span>{{ detailMessage.orderNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">  <el-form-item label="商品名称：">
            <span>{{ detailMessage.skuName }}</span>
          </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备编号：">
              <span>{{ detailMessage.innerCode }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">  <el-form-item label="订单金额：">
            <span>{{ detailMessage.price/100 }}</span>
          </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="完成时间：" :formatter="formatDate">
              <span>{{ detailMessage.updateTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">  <el-form-item label="创建时间：">
            <span>{{ detailMessage.createTime }}</span>
          </el-form-item>
          </el-col>
        </el-row>
        <!-- 第四行 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备地址：">
              <span>{{ detailMessage.addr }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付方式：">
              <span v-if="detailMessage.payType===1">支付宝支付</span>
              <span v-else>微信支付</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { orderList } from '@/api/aliceRequests'
export default {
  name: 'DikedeIndex',

  data() {
    return {
      dataValue: '',
      orderNoinput: '',
      dialogVisible: false,
      orderList: [],
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: null
      },
      detailMessage: {
        orderNo: '',
        skuName: '',
        innerCode: '',
        addr: '',
        price: null,
        createTime: '',
        updateTime: '',
        payType: null
      }

    }
  },

  created() {
    this.getorderList()
  },

  methods: {
    // 搜索功能
    searchList() {
      if (!this.orderNoinput) {
        this.getorderList()
      } else {
        this.orderList = this.orderList.filter(item => item.orderNo.includes(this.orderNoinput))
      }
      this.pageParams.pageIndex = 1
    },

    async checkDeatil(row) {
      this.dialogVisible = true
      this.detailMessage = { ...row }
      console.log(row)
    },
    handleClose() {
      this.dialogVisible = false
    },
    async getorderList() {
      const data = await orderList(this.pageParams)
      console.log(data)
      this.orderList = [...data.currentPageRecords]
      this.pageParams.totalCount = data.totalCount
      this.pageParams.totalPage = data.totalPage
    },
    // 进入某一页
    handleCurrentChange(pageNum) {
      this.pageParams.pageIndex = pageNum
      this.getorderList()
    },
    // 每页显示信息条数
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.pageParams.pageIndex = 1
      this.getorderList()
    },
    formatDate(row, column) {
      // 获取单元格数据
      const datac = row[column.property]
      return datac.replace('T', ' ')
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .btn-prev:disabled {
  background: #edf0f9 !important;
}
::v-deep .btn-next:disabled {
  background: #edf0f9 !important;
}
::v-deep .btn-prev{
 width: 70px;
 height: 32px;
 background-color: #d5ddf8 !important;
}
::v-deep .btn-next{
  margin: 0 20px;
 width: 70px;
 height: 32px;
 background-color: #d5ddf8 !important;
}
::v-deep .el-table {
  td {
    padding: 8px 0;
    border: none;
  }
  &::before {
    height: 0;
  }
}
.body{
  padding: 20px;
  .search{
    padding: 10px 20px;
    height: 64px;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    .searchBtn {
      background-color: #5f84ff;
      color: #fff;
    }
  }
  .order-status{
    display: flex;
   align-items: center;
    height: 54px;
    margin-bottom: 30px;
    background-color: hsla(0,0%,92.5%,.39);
    i{
      display: block;
      margin:0 20px;
      font-size: 30px;
    }
    .pic{
      display: block;
     margin-left: 300px;

    }
  }
  .content{
    padding:0 20px;
    color: #666;
  }
  .pageSize{
    margin: 20px;
    display: flex;
    justify-content: space-between;
    height: 28px;
    line-height: 28px;
    .el-pagination__total{
      flex: 1;
      font-size: 16px!important;
      color: #dbdfe5!important;
    }

  }
}

</style>
